<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/user/page' }">用户列表</el-breadcrumb-item>
            <el-breadcrumb-item>用户详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-tabs value="base" type="card" @tab-click="handleClick" class="mt15">
            <el-tab-pane label="基本信息" name="base">
                <base-info v-if="tabs.base"></base-info>
            </el-tab-pane>
            <el-tab-pane label="账户信息" name="account">
                <account v-if="tabs.account"></account>
            </el-tab-pane>
            <el-tab-pane label="订单列表" name="order">
                <order v-if="tabs.order"></order>
            </el-tab-pane>
            <el-tab-pane label="配资列表" name="allocation">
                <allocation v-if="tabs.allocation"></allocation>
            </el-tab-pane>
            <el-tab-pane label="消息列表" name="message">
                <message v-if="tabs.message"></message>
            </el-tab-pane>
            <el-tab-pane label="出入金列表" name="inOut">
                <in-out v-if="tabs.inOut"></in-out>
            </el-tab-pane>
            <el-tab-pane label="资金流水" name="water">
                <in-out v-if="tabs.water"></in-out>
            </el-tab-pane>
            <el-tab-pane label="出入金账户" name="inOutAccount">
                <in-out-account v-if="tabs.inOutAccount"></in-out-account>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import Order from './view/order.vue';
    import Account from './view/account.vue';
    import Allocation from './view/allocation.vue';
    import BaseInfo from './view/base.vue';
    import InOut from './view/inOut.vue';
    import Message from './view/message.vue';
    import Water from './view/water.vue';
    import InOutAccount from './view/inOutAccount.vue';

    export default {
        layout: 'admin',
        head() {
            return {title: '用户详情'};
        },
        // 这里可以将组件优化成子路由，方便权限可页面管理
        components: {Account, Order, Allocation, BaseInfo, InOut, Message, Water, InOutAccount},
        data() {
            return {
                tabs: {
                    base: true,
                    account: false,
                    order: false,
                    allocation: false,
                    message: false,
                    inOut: false,
                    water: false,
                    inOutAccount: false
                }
            };
        },
        methods: {
            handleClick(tab) {
                for (let key in this.tabs) {
                    this.tabs[key] = false;
                }
                this.tabs[tab.name] = true;
            }
        }
    };
</script>